/* 超过长度后以省略号显示 */
@mixin beyond-line-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 超出长度换行 */
@mixin beyond-line-break {
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}

/* 超出 * 行后换行, 默认 3 行 */
@mixin beyond-line-break-custom($line: 3) {
  text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

/* 
  全局的状态水印
  使用: 
  <template>
    <view class="status" />
    <view class="status status--success" />
  </template>
  <style lang="scss" scoped>
    @include status-watermark;
  </style>

  1.可通过传递参数修改水印内提示文字
  示例: @include status-watermark($success-text: '未完成');

  2.是否靠右垂直居中
  <view class="status is-vertical" />

  3.可通过传递参数 $vertical-right 修改右边距
  示例: @include status-watermark($vertical-right: 50rpx);

  4.目前只提供修改提示文字修改
    如果想配置文字颜色或者背景图片的参数, 自行添加参数
    注意: 参数给默认值, 不要影响已经应用该样式的元素
*/
@mixin status-watermark(
  $default-text: '已注销',
  $success-text: '已通过',
  $warning-text: '待审核',
  $danger-text: '未通过',
  $primary-text: '待签收',
  $vertical-right: 15px
) {
  .status {
    width: 64px;
    height: 52px;
    line-height: 52px;
    font-size: 14px;
    text-align: center;
    color: #999;
    background: url('@/assets/status/default.png') 100%/100%;
    z-index: 1;
    /* 是否垂直居中 */
    &.is-vertical {
      position: absolute;
      top: 50%;
      right: $vertical-right;
      transform: translateY(-50%);
    }
    &::after {
      content: $default-text;
      display: block;
      transform: rotate(-20deg);
    }
    &.status--success {
      background: url('@/assets/status/success.png') 100%/100%;
      color: #2ba246;
      &::after {
        content: $success-text;
      }
    }
    &.status--warning {
      background: url('@/assets/status/warning.png') 100%/100%;
      color: #ff9503;
      &::after {
        content: $warning-text;
      }
    }
    &.status--danger {
      background: url('@/assets/status/danger.png') 100%/100%;
      color: #ff2d03;
      &::after {
        content: $danger-text;
      }
    }
    &.status--primary {
      background: url('@/assets/status/primary.png') 100%/100%;
      color: #2a73ec;
      &::after {
        content: $primary-text;
      }
    }
  }
}
